<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表</title>
</head>
<script type="text/javascript" src="../vue.js"></script>

<!--
      v-for指令
          1.用于展示列表数据
          2.语法： v-for="(item,index) in items" :key="yyy"
          3.可遍历：数组。对象、字符串。指定次数
-->

<body>

<div id="root">
<!--  遍历数组-->
  <h2>人员列表(遍历数组)</h2>
  <ul>姓名-年龄
    <li v-for="(person,index) of persons" :key="person.id">{{index}} --{{person.name}}-{{person.age}}</li>
  </ul>

<!--  遍历对象-->
  <h2>汽车信息(遍历对象)</h2>
  <ul>
    <li v-for="(value,k) in car" :key="k">{{key}}--{{value}}</li>
  </ul>

  <!--  遍历字符串-->
  <h2>测试遍历字符串 （用的少）</h2>
  <ul>
    <li v-for="(char,index) in str" :key="index">
      {{char}}--{{index}}
    </li>
  </ul>

  <!--  遍历指定的次数-->
  <h2>测试遍历指定的次数 （用的少） </h2>
  <ul>
    <li v-for="(number,index) in 6" :key="index">
      {{number}}--{{index}}
    </li>
  </ul>


</div>


</body>

<script type="text/javascript">

  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      persons:[
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:14},
        {id:'003',name:'王五',age:13},
        {id:'004',name:'麻子',age:15},
      ],
      car:{
        name:'a8',
        price:'700',
        color:'black'
      },
      str:'hello'
    }
  })
</script>
</html>